<!--
 * @Author: GuoShuning
 * @Date: 2022-12-15 14:02:11
 * @LastEditors: GuoShuning
 * @LastEditTime: 2022-12-17 17:10:50
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./common/css/coommon.css" />
  <title>预警中心</title>
</head>

<body>
  <div class="projectIntegration">
    <div class="topBox topBox_business itemBoxContent">
      <div class="itemBox_boxTitle">项目列表</div>
      <div class="allSelect">
        <div class="leftSelect">
          <div class="itemSelect">
            <div class="input-group">
              <label>项目名称</label>
              <input placeholder="输入关键字" />
            </div>
          </div>
          <div class="itemSelect">
            <div class="select-group">
              <label>项目类型</label>
              <div class="options">
                <input placeholder="输入关键字" />
                <ul>
                  <li>输入关键字</li>
                  <li>输入关键字</li>
                  <li>输入关键字</li>
                  <li>输入关键字</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="itemSelect">
            <div class="input-group">
              <label>项目人员</label>
              <input placeholder="输入关键字" />
            </div>
          </div>
          <div class="itemSelect">
            <div class="select-group">
              <label>项目状态</label>
              <div class="options">
                <input placeholder="输入关键字" />
                <ul>
                  <li>输入关键字</li>
                  <li>输入关键字</li>
                  <li>输入关键字</li>
                  <li>输入关键字</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="itemSelect">
            <div class="select-group">
              <label>项目阶段</label>
              <div class="options">
                <input placeholder="输入关键字" />
                <ul>
                  <li>输入关键字</li>
                  <li>输入关键字</li>
                  <li>输入关键字</li>
                  <li>输入关键字</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="itemSelect">
            <div class="input-group">
              <label>创建时间</label>
              <input placeholder="输入关键字" />
            </div>
          </div>
        </div>
        <div class="rightBtn">
          <button class="button_primary button_icon"><i class="bi bi-search btnIcon"></i>搜索</button>
          <button class="button_primary_plain button_icon"><i class="bi bi-arrow-clockwise btnIcon"></i>重置</button>
        </div>
      </div>
    </div>
    <div class="bottomBox itemBoxContent">
      <div class="tableTop">
        <div class="tableListCount">项目数 <span>12</span>个</div>
        <div class="tableTop_rightAction">
          <button id="showAddEl" class="button_icon button_primary "><i class="bi bi-plus-lg"></i>新增供应商</button>
        </div>
      </div>
      <div class="allUpdateProject">
        <div class="itemUpdatePro">
          <div class="itemUpdatePro_title">
            <div class="pro_title_text"><img src="./common/img/dialogTitle.png" width="20px" height="20px" />基层治理协同协同项目
            </div>
            <div class="pro_title_date">2021-10-20至2022-10-30</div>
          </div>
          <div class="itemUpdatePro_info">
            <div class="info_item">
              <div class="info_item_box">
                <div class="info_item_box_tip">商务经理</div>
                <div class="info_item_box_text">某某某</div>
              </div>
              <div class="info_item_box">
                <div class="info_item_box_tip">项目类型</div>
                <div class="info_item_box_text">软硬件项目</div>
              </div>
              <div class="info_item_box">
                <div class="info_item_box_tip">重要程度</div>
                <div class="info_item_box_text">----</div>
              </div>
            </div>
            <div class="info_item">
              <div class="info_item_box">
                <div class="info_item_box_tip">售前经理</div>
                <div class="info_item_box_text">某某某</div>
              </div>
              <div class="info_item_box">
                <div class="info_item_box_tip">项目方向</div>
                <div class="info_item_box_text">软硬件项目</div>
              </div>
              <div class="info_item_box">
                <div class="info_item_box_tip">紧急程度</div>
                <div class="info_item_box_text">----</div>
              </div>
            </div>
            <div class="info_item">
              <div class="info_item_box">
                <div class="info_item_box_tip">项目经理</div>
                <div class="info_item_box_text">某某某</div>
              </div>
              <div class="info_item_box">
                <div class="info_item_box_tip">项目状态</div>
                <div class="info_item_box_text">软硬件项目</div>
              </div>
              <div class="info_item_box">
                <div class="info_item_box_tip">项目阶段</div>
                <div class="info_item_box_text">----</div>
              </div>
            </div>
            <div class="info_item">
              <div class="info_item_box">
                <div class="info_item_box_tip">时间进度</div>
                <div class="info_item_box_text info_item_box_progress">
                  <div class="progress">
                    <div class="progress_line">
                      <div class="progress_line_inner" style="width: 25%"></div>
                    </div>
                    <div class="progress_text">25%</div>
                  </div>
                </div>
              </div>
              <div class="info_item_box">
                <div class="info_item_box_tip">自评进度</div>
                <div class="info_item_box_text info_item_box_progress">
                  <div class="progress">
                    <div class="progress_line">
                      <div class="progress_line_inner" style="width: 25%"></div>
                    </div>
                    <div class="progress_text">25%</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="itemUpdatePro">
          <div class="itemUpdatePro_title">
            <div class="pro_title_text"><img src="./common/img/dialogTitle.png" width="20px" height="20px" />基层治理协同协同项目
            </div>
            <div class="pro_title_date">2021-10-20至2022-10-30</div>
          </div>
          <div class="itemUpdatePro_info">
            <div class="info_item">
              <div class="info_item_box">
                <div class="info_item_box_tip">商务经理</div>
                <div class="info_item_box_text">某某某</div>
              </div>
              <div class="info_item_box">
                <div class="info_item_box_tip">项目类型</div>
                <div class="info_item_box_text">软硬件项目</div>
              </div>
              <div class="info_item_box">
                <div class="info_item_box_tip">重要程度</div>
                <div class="info_item_box_text">----</div>
              </div>
            </div>
            <div class="info_item">
              <div class="info_item_box">
                <div class="info_item_box_tip">售前经理</div>
                <div class="info_item_box_text">某某某</div>
              </div>
              <div class="info_item_box">
                <div class="info_item_box_tip">项目方向</div>
                <div class="info_item_box_text">软硬件项目</div>
              </div>
              <div class="info_item_box">
                <div class="info_item_box_tip">紧急程度</div>
                <div class="info_item_box_text">----</div>
              </div>
            </div>
            <div class="info_item">
              <div class="info_item_box">
                <div class="info_item_box_tip">项目经理</div>
                <div class="info_item_box_text">某某某</div>
              </div>
              <div class="info_item_box">
                <div class="info_item_box_tip">项目状态</div>
                <div class="info_item_box_text">软硬件项目</div>
              </div>
              <div class="info_item_box">
                <div class="info_item_box_tip">项目阶段</div>
                <div class="info_item_box_text">----</div>
              </div>
            </div>
            <div class="info_item">
              <div class="info_item_box">
                <div class="info_item_box_tip">时间进度</div>
                <div class="info_item_box_text info_item_box_progress">
                  <div class="progress">
                    <div class="progress_line">
                      <div class="progress_line_inner" style="width: 25%"></div>
                    </div>
                    <div class="progress_text">25%</div>
                  </div>
                </div>
              </div>
              <div class="info_item_box">
                <div class="info_item_box_tip">自评进度</div>
                <div class="info_item_box_text info_item_box_progress">
                  <div class="progress">
                    <div class="progress_line">
                      <div class="progress_line_inner" style="width: 25%"></div>
                    </div>
                    <div class="progress_text">25%</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pagination">
        <span>共 200 条</span>
        <ul>
          <li><i class="bi bi-chevron-left"></i></li>
          <li class="active">1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>...</li>
          <li><i class="bi bi-chevron-right"></i></li>
        </ul>
      </div>
    </div>
    <div id="dialog-content-add">
      <div class="projectIntegration_addDialog">
        <div class="item-input">
          <div class="input-group">
            <label><span>*</span>项目名称</label>
            <input placeholder="输入关键字" />
          </div>
        </div>
        <div class="item-input">
          <div class="select-group">
            <label>项目类型</label>
            <div class="options">
              <input placeholder="输入关键字" />
              <ul>
                <li>输入关键字</li>
                <li>输入关键字</li>
                <li>输入关键字</li>
                <li>输入关键字</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="item-input">
          <div class="select-group">
            <label>项目方向</label>
            <div class="options">
              <input placeholder="输入关键字" />
              <ul>
                <li>输入关键字</li>
                <li>输入关键字</li>
                <li>输入关键字</li>
                <li>输入关键字</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="item-input">
          <div class="select-group">
            <label><span>*</span>项目状态</label>
            <div class="options">
              <input placeholder="输入关键字" />
              <ul>
                <li>输入关键字</li>
                <li>输入关键字</li>
                <li>输入关键字</li>
                <li>输入关键字</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="item-input">
          <div class="select-group">
            <label><span>*</span>关联项目</label>
            <div class="options">
              <input placeholder="输入关键字" />
              <ul>
                <li>输入关键字</li>
                <li>输入关键字</li>
                <li>输入关键字</li>
                <li>输入关键字</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="item-input">
          <div class="select-group">
            <label><span>*</span>商务负责人</label>
            <div class="options">
              <input placeholder="输入关键字" />
              <ul>
                <li>输入关键字</li>
                <li>输入关键字</li>
                <li>输入关键字</li>
                <li>输入关键字</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="item-input">
          <div class="select-group">
            <label><span>*</span>售前经理</label>
            <div class="options">
              <input placeholder="输入关键字" />
              <ul>
                <li>输入关键字</li>
                <li>输入关键字</li>
                <li>输入关键字</li>
                <li>输入关键字</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script type="module">
  import DiaLog from "./common/js/diaLog.js";
  let dialog = new DiaLog({
    title: "新建项目",
    width: "543px",
    el: "#dialog-content-add",
    cancelText: "取消",
    confirmText: "保存",
    cancel: () => {
      console.log("取消");
      dialog.hide();
    },
    confirm: () => {
      console.log("保存");
      dialog.hide();
    },
  });
  showAddEl.addEventListener("click", () => {
    dialog.show();
  });
</script>

</html>